<template>
	<!-- bottom、center -->
	<!-- #ifdef MP-BAIDU -->
	<view
		v-if="notStopTouch"
		v-show="showCopy"
		class="popup-wapper"
		:class="{
			'fade-enter-active': showCopy && !hideStart,
			'fade-leave-active': hideStart
		}"
	>
		<view
			:style="{'--borderradius': round+'px',background: mode=='center' ?centerBg:'#fff'}"
			class="popup-content"
			:class="{
				'popup-content_bottom': mode == 'bottom',
				'popup-content_center': mode == 'center',
				'fade-up-enter-active': mode =='bottom' && showCopy && !hideStart,
				'fade-up-leave-active': mode =='bottom' && hideStart,
				'fade-up-center-enter-active': mode =='center' && showCopy && !hideStart,
				'fade-up-center-leave-active': mode =='center' && hideStart
			}"
		>
			<slot></slot>
			<!-- 关闭按钮 -->
			<view v-if="closeable" class="icon-close-wapper" @click.stop="hideStart = true">
				<image class="icon-close" src="/static/image/collegeClose.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	<view
		v-else
		v-show="showCopy"
		class="popup-wapper"
		:class="{
			'fade-enter-active': showCopy && !hideStart,
			'fade-leave-active': hideStart
		}"
	>
		<view
			:style="{'--borderradius': round+'px',background: mode=='center'? centerBg:'#fff'}"
			class="popup-content"
			:class="{
				'popup-content_bottom': mode == 'bottom',
				'popup-content_center': mode == 'center',
				'fade-up-enter-active': mode =='bottom' && showCopy && !hideStart,
				'fade-up-leave-active': mode =='bottom' && hideStart,
				'fade-up-center-enter-active': mode =='center' && showCopy && !hideStart,
				'fade-up-center-leave-active': mode =='center' && hideStart
			}"
		>
			<slot></slot>
			<!-- 关闭按钮 -->
			<view v-if="closeable" class="icon-close-wapper" @click.stop="hideStart = true">
				<image class="icon-close" src="/static/image/collegeClose.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	<!-- #endif -->
	<!-- #ifndef MP-BAIDU -->
	<u-popup v-if="notStopTouch" :show="show" :mode='mode' :round="round" :bgColor='bgColor' :closeable="closeable" :overlayOpacity="overlayOpacity" :overlayStyle="overlayStyle" @close="closePopup()">
		<slot></slot>
	</u-popup>
	<u-popup v-else :show="show" :mode='mode' :round="round" :bgColor='bgColor' :closeable="closeable" @close="closePopup()" @touchmove.stop.prevent="" :overlayOpacity="overlayOpacity" :overlayStyle="overlayStyle">
		<slot></slot>
	</u-popup>
	<!-- #endif -->
</template>

<script>
export default {
	props: {
		// 圆角
		round: {
			type: [Number, String],
			default: () => 0
		},
		// 是否有关闭按钮
		closeable: {
			type: Boolean,
			default: () => false
		},
		// 展示弹窗
		show: {
			type: Boolean,
			default: () => false
		},
		mode: {
			type: String,
			default: () => "bottom"
		},
		bgColor: {
			type: String,
			default: () => "#fff"
		},
		overlayOpacity:{
			type: [Number, String],
			default: () => 0.5
		},
    closeEvent: String,
    openEvent: {
      type: String
    },
	notStopTouch: Boolean,
	// 自定义遮罩的样式
	overlayStyle: {
	    type: [Object, String],
	    default: uni.$u.props.popup.overlayStyle
	},
	centerBg: {
		type: String,
		default: () => "#fff"
	}
	},
	computed: {
		animationType() {
			return {
				bottom: "fade-up",
				center: "fade-up-center"
			}[this.mode];
		}
	},

	data() {
		return {
			hideStart: false,
			showCopy: false
		};
	},
	watch: {
		show: function(show) {
            // #ifdef MP-BAIDU
			if (show) {
				this.showCopy = true;
				this.hideStart = false;
			} else if (!this.hideStart) {
				// 父组件关闭 先执行动画
				this.hideStart = true;
			}
            // #endif
            if (show) {
              if (this.openEvent) this.$bus.$emit(this.openEvent)
            }
		},
		hideStart: function(hideStart) {
            // #ifdef MP-BAIDU
			if (hideStart) {
				setTimeout(() => {
					this.$emit("close");
					this.showCopy = false;
				}, 300);
			}
            // #endif
		}
	},
  methods: {
    closePopup() {
      if (this.closeEvent) this.$bus.$emit(this.closeEvent)
      this.$emit('close')
    }
  }
};
</script>

<style lang="scss" scoped>
.icon-close-wapper {
	position: absolute;
	top: 20px;
	right: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;

	.icon-close {
		width: 12px;
		height: 12px;
	}
}

.popup-wapper {
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;

	.popup-content {
		position: absolute;
		// background: #ffffff;
		z-index: 1;
		border-top-left-radius: var(--borderradius);
		border-top-right-radius: var(--borderradius);
		transition-duration: 0.3s;
	}

	.popup-content_bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translate(0, 0);
		background: #fff;
	}

	.popup-content_center {
		bottom: 50%;
		right: 50%;
		// width: 80vw;
		transform: translate(50%, 50%);
		border-bottom-left-radius: var(--borderradius);
		border-bottom-right-radius: var(--borderradius);
		z-index: 1;
	}
}

.fade-enter-active {
	animation: fade 0.3s ease-out;
}

.fade-leave-active {
	background: rgba(0, 0, 0, 0);
	animation: fade-leave 0.3s ease-in;
}

.fade-up-enter-active {
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-name: fade-up;
}

.fade-up-center-enter-active {
	animation-duration: 0.3s;
	animation-timing-function: ease-out;
	animation-name: fade-up-center;
}

.fade-up-leave-active {
	animation: fade-up-leave 0.3s ease-in;
}

.fade-up-center-leave-active {
	animation: fade-up-center-leave 0.3s ease-in;
}

@keyframes fade-up {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes fade-up-center {
	from {
		bottom: 25%;
		opacity: 0;
	}
	to {
		bottom: 50%;
		opacity: 1;
	}
}

@keyframes fade-up-leave {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100%);
	}
}

@keyframes fade-up-center-leave {
	from {
		bottom: 50%;
		opacity: 1;
	}
	to {
		bottom: 25%;
		opacity: 0;
	}
}

@keyframes fade {
	from {
		background: rgba(0, 0, 0, 0);
	}
	to {
		background: rgba(0, 0, 0, 0.5);
	}
}

@keyframes fade-leave {
	from {
		background: rgba(0, 0, 0, 0.5);
	}
	to {
		background: rgba(0, 0, 0, 0);
	}
}
</style>
